<script setup>
import { reactive } from "vue";
// import { Login } from "@/api/interface";
// import { loginApi } from "@/api/modules/login";
import {
  UserOutlined,
  LockOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue";

const formState = reactive({
  username: "",
  password: "",
});
</script>

<template>
  <a-form :model="formState">
    <a-form-item
      name="username"
      :rules="[{ required: true, message: '请输入用户名' }]"
    >
      <a-input placeholder="用户名:admin / user" :prefix="UserOutlined" />
    </a-form-item>
    <a-form-item
      name="password"
      :rules="[{ required: true, message: `请输入密码` }]"
    >
      <a-input
        autoComplete="new-password"
        placeholder="密码:123456"
        :prefix="LockOutlined"
      />
    </a-form-item>
    <a-form-item className="login-btn">
      <a-button @click="resetFields" :icon="CloseCircleOutlined">
        <!-- {{ login.reset }} -->
      </a-button>
      <a-button
        type="primary"
        htmlType="submit"
        loading="{loading}"
        :icon="UserOutlined"
      >
        <!-- {{ t("login.confirm") }} -->
      </a-button>
    </a-form-item>
  </a-form>
</template>
